<template>
  <div class="cate">
    <Banner ref="banner" />
    <List ref="list" />
    <img
      v-if="gotop"
      src="../assets/img/totop.png"
      alt=""
      class="top"
      @click="toTop"
    >
  </div>
</template>

<script>
	import Banner from "../components/cate/banner.vue"
	import List from "../components/cate/list.vue"
	export default {
		name: "",
		components: {
			Banner,
			List
		},
		data() {
			return {
				gotop:false
			}
		},
		watch: {
			$route: function() {
				this.$refs.banner.getData(this.$route.query.id)
				this.$refs.list.getData(this.$route.query.id)
			}
		},
		mounted() {
			this.$refs.banner.getData(this.$route.query.id)
			this.$refs.list.getData(this.$route.query.id)
			window.addEventListener("scroll", this.handleScroll, true);
		},
		methods:{
			handleScroll() {
				let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
				scrolltop > 50 ? (this.gotop = true) : (this.gotop = false);
			},
			toTop() {
			
				let top = document.documentElement.scrollTop || document.body.scrollTop;
				// 实现滚动效果 
				const timeTop = setInterval(() => {
					document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
					if (top <= 0) {
						clearInterval(timeTop);
					}
				}, 10);
			}
		}


	}
</script>

<style scoped lang="scss">
	.cate .top {
		z-index: 999;
		position: fixed;
		top: 60%;
		right: 8%;
		width: 4.94rem;
		height: 4.94rem;
	}
</style>
